<template>
    <div class="outDiv">
        <form>
            <table>
                <tbody>
                    <tr>
                        <td>账号:</td>
                        <td><input type="text" placeholder="请输入用户名" v-model="userAccount"></td>
                    </tr>
                    <tr>
                        <td>密码:</td>
                        <td><input type="password" placeholder="请输入密码" v-model="userPassword" @keydown.enter="btnLogin"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="登录" @click="btnLogin"></td>
                        <td>还没有用户 点击<a href="/register">注册</a></td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>
</template>
<script setup>
// == 引入相关依赖-开始 ==
import { ref } from "vue"
import { url } from '@/router'
import { useRouter } from "vue-router"
// 用户登录状态验证
import { store } from '@/tools/store'
// == 引入相关依赖-结束 ==
// == 定义变量-开始 ==
let userAccount = ref('')
let userPassword = ref('')
let router = useRouter()
// == 定义变量-结束 ==

// == 动作函数-开始 ==
function btnLogin() {
    let uAccount = userAccount.value
    let uPassword = userPassword.value
    if (uAccount != '' && uPassword != '') {
        fetch(`${url}/admins?account=${uAccount}&&password=${uPassword}`).then(res => {
            if (res.ok) {
                store.dispatch('login'); // 设置登录状态
                localStorage.setItem('userName', uAccount); // 存储用户名
                alert('登录成功');
                router.push(`/index`)
            } else {
                alert('账号或密码错误,请重试!')
                return null
            }
        })
    } else {
        if (uAccount === '') {
            alert('用户名不能为空')
        }
        else if (uPassword === '') {
            alert('密码不能为空')
        }
    }

}
// == 动作函数-结束 ==
</script>
<style scoped>
.outDiv {
    width: 100%;
    height: 100vh;
    background-color: aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
}

table {
    border: 2px solid black;
    padding: 20px;
    box-shadow: 3px 3px #00b9ff96;
    height: 160px;
}

a {
    color: red;
    text-decoration: none;
    border-bottom: 2px solid red;
}

input[type=button] {
    box-shadow: 1px 1px blue;
    text-align: center;
    height: 27px;
    border-radius: 4px;
    font-family: cursive;
    background-color: #f0fffdf5;
    width: 50px;
}
</style>